<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <title>列表</title>
</head>
<body>
    <!-- 
        Vue响应式开发的原理：
            Vue会监听数据的更改（给属性绑定set方法），一旦修改数据就会刷新页面
        Vue数据绑定的原理:
            1. Vue会给data属性中的每一个对象的每一个属性绑定get、set方法
            2.数组元素就不行了，没法绑定get、set，所以this.person[0] = {gender:'woman'}不会触发页面刷新，导致数据实际上改了，但是页面不显示
     -->
     <div id="root">
         <h1>人员列表</h1>
         <input v-model='keyWord' type="text" name="" id="" placeholder="请输入姓名">
         <button @click = 'sortType = 1'>年龄降序</button>
         <button @click = 'sortType = 2'>年龄升序</button>
         <button @click = 'sortType = 0'>原顺序</button>
         <button @click = 'updateMei'>更改马冬梅的信息</button>
         <h2>
             <ul>
                 <!-- 使用v-for遍历数组 -->
                 <li v-for='(p,index) in fmPerson' :key='p.id'>
                     {{p.name}}----{{p.age}}岁---{{p.sex}}
                 </li>.
             </ul>
         </h2>
    </div>

    <script>
        let vm = new Vue({
            el:'#root',
            data:{
                person:[
                    {id:'001',name:'马冬梅',age:22,sex:'男'},
                    {id:'002',name:'周冬雨',age:27,sex:'女'},
                    {id:'003',name:'周杰伦',age:99,sex:'男'},
                    {id:'004',name:'温兆伦',age:45,sex:'男'},
                ],
                keyWord:'',
                sortType: 0
            },
            methods:{
                updateMei(){
                    console.log(this.person);;
                    // this.person[0].name = '马春梅';
                    // this.person[0].age = 25;
                    this.person[0] = {id:'001',name:'江德福',age:58,sex:'男'}
                }
            },
            computed:{//使用计算属性,不改变原始数据
                fmPerson(){
                    const {person,keyWord,sortType} = this;
                    //过滤
                    let arr = person.filter(p=>p.name.includes(keyWord));
                    //排序
                    switch(sortType){
                        case 1:
                            arr.sort((a,b)=>{
                                return b.age-a.age;
                            });
                            break;
                        case 2:
                            arr.sort((a,b)=>{
                                return a.age-b.age;
                            });
                            break;
                        default:
                            break;
                    }
                    return arr;
                }
            }
        });
    </script>
</body>
</html>